<!DOCTYPE html>
<html>
<head>
	<title>案例2</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background: #000000;
		}
		.wrap{
			margin-top: 200px;
			perspective:1000px;/*父元素:加景深*/
		}
		.box{
			position: relative;
			margin: 0 auto;
			width: 200px;
			height: 200px;
			/*可以旋转父级查看效果*/
			transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
			/*子元素:指定嵌套元素如何在3D空间中呈现*/
			transform-style: preserve-3d;
		}
		.box_animate{
			/*父级添加动画*/
			animation: xuanzhuan 6s linear;
		}
		@keyframes xuanzhuan{
			0%{transform: rotateX(60) rotateY(60) rotateZ(60deg);}
			100%{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
		}
		.item{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			box-shadow:inset 0 0 6px rgba(255,255,255,.3);
			background-size: auto 100%;
			transition: all 1s;
		}
		.top{
			transform: rotateX(90deg) translateZ(100px);
			background-image: url("https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg");
		}
		.bottom{
			transform: rotateX(-90deg) translateZ(100px);
			background-image: url("https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&fm=26&gp=0.jpg");
		}
		.left{
			transform: rotateY(-90deg) translateZ(100px);
			background-image: url("https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg");
		}
		.right{
			transform: rotateY(90deg) translateZ(100px);
			background-image: url("https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984473917,238095211&fm=26&gp=0.jpg");
		}
		.front{
			transform: translateZ(100px);
			background-image: url("https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg");
		}
		.back{
			transform: translateZ(-100px) rotateY(180deg);
			background-image: url("https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3468842248,1928586949&fm=26&gp=0.jpg");
		}
		/*鼠标悬停
		.box:hover .top{
			transform: rotateX(90deg) translateZ(200px);
		}
		.box:hover .bottom{
			transform: rotateX(-90deg) translateZ(200px);
		}
		.box:hover .left{
			transform: rotateY(-90deg) translateZ(200px);
		}
		.box:hover .right{
			transform: rotateY(90deg) translateZ(200px);
		}
		.box:hover .front{
			transform: translateZ(200px);
		}
		.box:hover .back{
			transform: translateZ(-200px) rotateY(180deg);
		}
		*/
	</style>
</head>
<body>
	<div class="wrap">
		<div class="box box_animate">
			<div class="item top"></div>
			<div class="item bottom"></div>
			<div class="item left"></div>
			<div class="item right"></div>
			<div class="item front"></div>
			<div class="item back"></div>
		</div>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			function listen_box(){
				$('.box .top').css({"transform":"rotateX(90deg) translateZ(200px)"})
				$('.box .bottom').css({"transform":"rotateX(-90deg) translateZ(200px)"})
				$('.box .front').css({"transform":"translateZ(200px)"})
				$('.box .back').css({"transform":"translateZ(-200px) rotateY(180deg)"})
				$('.box .left').css({"transform":"rotateY(-90deg) translateZ(200px)"})
				$('.box .right').css({"transform":"rotateY(90deg) translateZ(200px)"})
				$('.box').removeClass('box_animate')
			}
			function recover_box(){
				$('.box .top').css({"transform":"rotateX(90deg) translateZ(100px)"})
				$('.box .bottom').css({"transform":"rotateX(-90deg) translateZ(100px)"})
				$('.box .front').css({"transform":"translateZ(100px)"})
				$('.box .back').css({"transform":"translateZ(-100px) rotateY(180deg)"})
				$('.box .left').css({"transform":"rotateY(-90deg) translateZ(100px)"})
				$('.box .right').css({"transform":"rotateY(90deg) translateZ(100px)"})
				setTimeout(function(){
					$('.box').addClass('box_animate')
				},1000)
			}
			function zoom_box(){
				setTimeout(function(){
					recover_box()
				},1000)
			}
			$('.box').on('webkitAnimationEnd',async function(){
				await listen_box()
				await zoom_box()
			})
		})
	</script>
</body>
</html>